<template>
	<div v-if="exist" class="loading yd-flex">
		<div :class="{'out': !show}" class="door door--l yd-flex-1 yd-flex-h-hC-vU">
			<div class="fu fu--l yd-flex-h-hC-vC">
				<div class="fu__1 yd-flex-h-hC-vC">
					<div class="fu__2 yd-flex-h-hC-vC">福</div>
				</div>
			</div>
			<img class="hu hu--l" src="~@/assets/images/huLogo.png" />
		</div>
		<div :class="{'out': !show}" class="door door--r yd-flex-1 yd-flex yd-flex-hC">
			<div class="fu fu--r yd-flex-h-hC-vC">
				<div class="fu__1 yd-flex-h-hC-vC">
					<div class="fu__2 yd-flex-h-hC-vC">福</div>
				</div>
			</div>
			<img class="hu hu--r" src="~@/assets/images/huLogo.png" />
		</div>
	</div>
</template>

<script>
import { defineComponent, ref } from 'vue';

export default defineComponent({
	setup() {
		const exist = ref(true);
		const show = ref(true);

		setTimeout(() => { exist.value = false; }, 1000);
		setTimeout(() => { show.value = false; }, 500);

		return { exist, show };
	}
})
</script>

<style scoped>
.loading {
  position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
  z-index: 9999;
}
.door{
	position: relative;
	background-color: #BB1314;
	transition: all 0.5s ease-out;
}
.door--l{
	left: 0;
	border-right: 2px solid #010102;
}
.door--l.out{
	left: -50%;
}
.door--r{
	right: 0;
	border-left: 2px solid #010102;
}
.door--r.out{
	right: -50%;
}
.fu{
	margin-top: 10%;
	width: 120px;
	height: 120px;
	box-sizing: border-box;
	border: 6px solid #e5d0a6;
	transform: rotate(45deg);
	padding: 6px;
	box-shadow: 0 0 50px #e5d0a6;
}
.fu__1{
	width: 100%;
	height: 100%;
	box-sizing: border-box;
	border: 2px solid #e5d0a6;
}
.fu__2{
	width: 100%;
	height: 100%;
	box-sizing: border-box;
	transform: rotate(-45deg);
	font-size: 70px;
	color: #e8d4ab;
	font-weight: bold;
	font-family: cursive;
}
.fu--l{
	margin-right: 58px;
}
.fu--r{
	margin-left: 58px;
}
.hu{
	width: 100px;
	height: 100px;
	position: absolute;
	top: 51%;
}
.hu--l{
	right: 6%;
}
.hu--r{
	left: 6%;
}
</style>
